<template>
  <div>
    <mt-header title="签到记录" fixed style="background-color: #ff4d4f;color:#fff;">
      <router-link to="/me" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="main">
      <div class="list" ref="wrapper" :style="{ height: (wrapperHeight) + 'px' }">
        <mt-loadmore
          class="loadmore"
          :top-method="loadTop"
          :bottom-method="loadBottom"
          :bottom-all-loaded="allLoaded"
          ref="loadmore"
          :autoFill="isAutoFill"
        >
          <div v-if="list.lenght!=0" style="height:100%;">
            <ul>
              <!-- <li>
                <div class="title">活动名称</div>
                <div class="date" style="font-size: 1rem;color:#000">签到时间</div>
              </li>-->
              <li v-for="(item,index) in list" :key="index">
                <i class="iconfont iconyiqiandao icon"></i>
                <img :src="'https://actwxapi.ouheshuju.com/api/v1/Images/Show/'+item.Picture" alt />
                <p class="title">{{item.Address}}</p>
                <p class="title">
                  <i>{{item.ActivityName}}</i>
                  <span>{{item.SignTime}}</span>
                </p>
                <div class="date" style="font-size: 1rem;color:#000"></div>
              </li>
            </ul>
          </div>
          <div v-else>暂无活动记录</div>
        </mt-loadmore>
      </div>
    </div>
  </div>
</template>

<script>
import https from "../../utils/http.js";
export default {
  data() {
    return {
      PageIndex: 1,
      PageSize: 10,
      list: [],
      PageTotal: 0,
      allLoaded: false,
      isAutoFill: false,
      wrapperHeight: 0
    };
  },
  methods: {
    loadTop() {
      this.get_list();
    },
    loadBottom() {
      this.loadMore();
    },
    loadMore() {
      if (this.PageIndex > this.PageTotal) {
        Toast("已经到底了");
        this.$refs.loadmore.onBottomLoaded();
      } else {
        https({
          method: "post",
          url: "/api/v1/Activities/SignedGetPage",
          data: {
            PageIndex: this.PageIndex,
            PageSize: this.PageSize
          }
        })
          .then(res => {
            if (res.Code == 200) {
              this.list = this.list.concat(res.Data.RecordList);
              this.PageIndex++;
              this.$refs.loadmore.onBottomLoaded();
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    get_list() {
      https({
        url: "/api/v1/Activities/SignedGetPage",
        method: "POST",
        data: {
          PageIndex: 1,
          PageSize: this.PageSize
        }
      }).then(res => {
        console.log(res);
        if (res.Code == 200) {
          this.list = res.Data.RecordList;
          console.log(this.list);
          this.allLoaded = false;
          this.PageIndex = res.Data.PageIndex;
          this.PageTotal = res.Data.PageTotal;
          this.PageIndex = 2;
          this.$refs.loadmore.onTopLoaded();
        }
      });
    }
  },
  mounted() {
    this.get_list();
    this.wrapperHeight =
      document.documentElement.clientHeight -
      this.$refs.wrapper.getBoundingClientRect().top;
  }
};
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  height: 100vh;
  padding-top: 2.5rem;
  box-sizing: border-box;
  // margin-bottom: 4rem;
  .icon {
    font-size: 3rem;
    color: red;
    position: absolute;
    top: 0rem;
    left: 0;
  }
  .list {
    width: 100%;
    height: 100%;
    overflow: scroll;

    ul {
      margin: 0 auto;
      padding: 0;
      width: 100%;
      background-color: #fff;

      li {
        position: relative;
        list-style: none;
        width: 100%;
        padding: 1rem 2.5% 0.5rem 2.5%;
        box-sizing: border-box;
        border-bottom: 1px solid #eee;
        img {
          width: 100%;
          height: 16rem;
        }
        .title {
          margin-top: 0.5rem;
          text-align: left;
          font-size: 1rem;
          width: 100%;
          span {
            float: right;
          }
          i {
            font-style: normal;
            display: inline-block;
            width: 60%;
            word-wrap: break-word;
            word-break: break-all;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>